<template>
  <div class="content-info">
    <LabelTitle text="综合数据" :showImg="false"></LabelTitle>
    <div class="gl-box">
      <div class="zl-item-box">
        <p class="title">任务总览</p>
        <div class="zl-item">
          <div
            class="lz-item"
            v-for="(item, index) in list"
            :style="{ 'margin-top': index > 2 ? '15px' : '0' }"
            :key="index"
          >
            <p class="num">{{ item.num || 0 }}</p>
            <p class="text">{{ item.title }}</p>
          </div>
        </div>
      </div>
      <!-- <div class="gl-item" v-for="(item, index) in list" :key="index">
      <div class="top-info">
        <div class="label-left">
          <span class="text">{{ item.title }}</span>
        </div>
        <div class="value-content">{{ item.num || 0 }}</div>
      </div>
    </div> -->
    </div>
  </div>
</template>
<script setup>
import LabelTitle from "@/components/labeltitle.vue";
const props = defineProps({
  allData: Object,
});

let list = ref([
  {
    title: "所有任务/个",
    num: "0",
  },
  {
    title: "已处理/个",
    num: "0",
  },
  {
    title: "未处理/个",
    num: "0",
  },
  // {
  //   title: "平均处置时长/min",
  //   num: "0小时",
  // },
  // {
  //   title: "完成率",
  //   num: "0%",
  // },
  // {
  //   title: "超时率",
  //   num: "0%",
  // },
]);

watch(
  () => props.allData,
  (newval) => {
    if (newval.eventCnt) {
      list.value[0].num = newval.eventCnt;
      list.value[1].num = newval.handleCnt;
      list.value[2].num = newval.eventCnt - newval.handleCnt;
      // list.value[3].num = newval.handleDuration;
      // list.value[4].num = newval.handleRate + "%";
      // list.value[5].num = newval.recurrenceCntRate + "%";
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
.content-info {
  width: 33%;
  margin-right: 20px;
}
.gl-box {
  width: 100%;
  height: 250px;
  margin-top: 14px;
  background: #ffffff;
  box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
  border-radius: 12px;
  padding: 24px 15px;
  .zl-item-box {
    width: 100%;
    height: 100%;
    background: linear-gradient(
      180deg,
      #ddecff 0%,
      #ffffff 100%
    ); /* 更改背景颜色 */
    border-radius: 12px;
    padding-top: 27px;
    .title {
      z-index: 2; // 确保文字在背景之上
      width: 100%;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #333333;
    }
    .zl-item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 18px;
      .lz-item {
        width: 33%;
        // height: 45px;
        text-align: center;
        border-right: 1px solid #dadcde;
        &:last-child {
          border-right: none;
        }
        .num {
          font-family: YouSheBiaoTiHei;
          font-size: 24px;
          color: #2263bf;
        }
        .text {
          margin-top: 5px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }
  .gl-item {
    width: 15%;
    height: 100px;
    padding: 29px 18px 20px 19px;
    &:nth-child(1) {
      background: url("../../../assets/images/gl1.png");
      background-size: 100% 100%;
    }
    &:nth-child(2) {
      background: url("../../../assets/images/gl2.png");
      background-size: 100% 100%;
    }
    &:nth-child(3) {
      background: url("../../../assets/images/gl3.png");
      background-size: 100% 100%;
    }
    &:nth-child(4) {
      background: url("../../../assets/images/gl4.png");
      background-size: 100% 100%;
    }
    &:nth-child(5) {
      background: url("../../../assets/images/gl5.png");
      background-size: 100% 100%;
    }
    &:nth-child(6) {
      background: url("../../../assets/images/gl1.png");
      background-size: 100% 100%;
    }
    .top-info {
      display: flex;
      align-items: top;
      justify-content: space-between;
      .label-left {
        display: flex;
        align-items: center;
        .labelimg {
          width: 30px;
          height: 30px;
          margin-right: 14px;
        }
        .text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #ffffff;
          line-height: 22px;
          letter-spacing: 1px;
          text-align: left;
          font-style: normal;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .value-content {
        font-family: YouSheBiaoTiHei;
        font-size: 30px;
        color: #ffffff;
        line-height: 39px;
        letter-spacing: 3px;
        text-align: left;
        font-style: normal;
        white-space: nowrap;
      }
    }
  }
}
</style>
